<?php if (!defined('THINK_PATH')) exit(); /*a:1:{s:72:"/Users/qingyun/php/fruits/public/../application/test/view/test_index.tpl";i:1514699052;}*/ ?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <style>
            ul{
                width: 500px;
                height: 50px;
                display: flex;
                list-style: none;
            }
            input{
                margin-left: 10px;
            }
        </style>
    </head>
    <body>
    <ul class="color">
        <li style="width: 60px">颜色:</li>
        <?php foreach($color as $vo): ?>
            <li>
                <input type="checkbox" value="<?php echo $vo['name']; ?>"><?php echo $vo['name']; ?>
            </li>
        <?php endforeach; ?>
    </ul>
    <ul class="size">
        <li style="width: 60px">尺码:</li>
        <?php foreach($size as $vo): ?>
            <li>
                <input type="checkbox" value="<?php echo $vo['size']; ?>"><?php echo $vo['size']; ?>
            </li>
        <?php endforeach; ?>
    </ul>
    <form action="<?php echo url('test/Test/save'); ?>" method="post">
        <table border="1" width="500px">
            <thead>
            <tr>
                <th>颜色</th>
                <th>尺码</th>
                <th>库存</th>
                <th>价格</th>
            </tr>
            </thead>

            <tbody class="attr">
            </tbody>

        </table>
        <input type="submit" value="提交">
    </form>
    <script type="text/javascript" src="/static/lib/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
        var color = new Array();
        var size = new Array();
        $('.color').find('input:checkbox').click(function () {
            if($(this).prop('checked')){
                color.push($(this).val());
            }else{
                color.remove($(this).val());
            }

            if(size.length > 0){
                $('.attr').empty();
                $.each(color,function (key,val) {
                    $.each(size,function (keyss, valss) {
                        var str = '<tr>' +
                            '<td>'+val+'<input type="hidden" name="color[]" value="'+val+'"></td>' +
                            '<td>'+valss+'<input type="hidden" name="size[]" value="'+valss+'"></td>' +
                            '<td><input type="text" name="num[]">件</td>' +
                            '<td><input type="text" name="price[]"元</td>' +
                            '</tr>';
                        $('.attr').append(str);
                    })
                })
            }
        });
        $('.size').find('input:checkbox').click(function () {
            if($(this).prop('checked')){
                size.push($(this).val());
            }else{
                size.remove($(this).val());
            }

            if(color.length > 0){
                $('.attr').empty();
                $.each(color,function (key,val) {
                    $.each(size,function (keyss, valss) {
                        var str = '<tr>' +
                            '<td>'+val+'<input type="hidden" name="color[]" value="'+val+'"></td>' +
                            '<td>'+valss+'<input type="hidden" name="size[]" value="'+valss+'"></td>' +
                            '<td><input type="text" name="num[]">件</td>' +
                            '<td><input type="text" name="price[]"元</td>' +
                            '</tr>';
                        $('.attr').append(str);
                    })
                })
            }
        });

        Array.prototype.remove = function (val) {
            var index = this.indexOf(val);
            if (index > -1) {
                this.splice(index, 1);
            }
        };
    </script>
    </body>
</html>
